@model SMEsCustomer360Degree.Models.ViewModels.PortfolioManagement.AccountPlanningHistoryViewModel
<div class="">
    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_content">
                    <div class="" role="tabpanel" data-example-id="togglable-tabs">
                        <ul class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                            <li id="pm-ap-tab" role="presentation" class="active">
                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanning, "AccountPlanning", "PortfolioManagement", null, null)
                            </li>
                            <li id="pm-pm-tab" role="presentation" class="">
                                @Html.ActionLink(@SMEsCustomer360Degree.Core.Resources.Resource.PortManagement, "PortfolioManagement", "PortfolioManagement", null, null)
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="tab_content2" aria-labelledby="profile-tab">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="x_panel">
                                            <div class="x_title">
                                                <h2>
                                                    @SMEsCustomer360Degree.Core.Resources.Resource.History
                                                    <small>
                                                        @SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanning of
                                                    </small> @Model.CustName
                                                </h2>
                                                <ul class="nav navbar-right panel_toolbox">
                                                    <li>
                                                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                                    </li>
                                                </ul>
                                                <div class="clearfix"></div>
                                            </div>
                                            <div class="x_content">
                                                <div id='calendar'></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@{
    var initialLangCode = "vi";
    foreach (var i in SMEsCustomer360Degree.Controllers.core.SiteLanguages.AvailableLanguages)
    {
        if (SMEsCustomer360Degree.Controllers.core.SiteLanguages.GetCurrentLanguage().Equals(i.LangCultureName))
        {
            initialLangCode = i.LangCultureName;
        }

    }
}



@section scripts
{
    <!-- FullCalendar -->
    <link href="/scripts/vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
    <link href="/scripts/vendors/fullcalendar/dist/fullcalendar.print.css" rel="stylesheet" media="print">
    <!-- FullCalendar -->
    <script src="/scripts/vendors/moment/min/moment.min.js"></script>
    <script src="/scripts/vendors/fullcalendar/dist/fullcalendar.min.js"></script>
    <script src='/scripts/vendors/fullcalendar/dist/lang-all.js'></script>

    <!-- FullCalendar -->
    <script>

        $(window).load(function () {
            var date = new Date(),
                d = date.getDate(),
                m = date.getMonth(),
                y = date.getFullYear(),
                started,
                categoryClass;
            var data =@Html.Raw(Json.Encode(Model.ListHistory));
            var content =[];
            for (var r = 0; r < data.length; r++) {
                var row = {};
                if (data[r]["Type"]=="1") {
                    row = {
                        id: 'change_ap_'+r,
                        title: decodeHtml('@SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanningEdit'),
                        start: moment(data[r]["ChangeDate"]).local().format(),
                        end: moment(data[r]["ChangeDate"]).local().format(),
                        allDay: false,
                        url : '/PortfolioManagement/ViewHistoryData?cif='+data[r]["Cif"] + '&type=1&id='+data[r]["Id"]
                    };
                }
                if (data[r]["Type"]=="2") {
                    row = {
                        id: 'change_ap_'+r,
                        title: decodeHtml('@SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanningEditFinance'),
                        start: moment(data[r]["ChangeDate"]).local().format(),
                        end: moment(data[r]["ChangeDate"]).local().format(),
                        allDay: false,
                        url : '/PortfolioManagement/ViewHistoryFinance?cif='+data[r]["Cif"] + '&type=2&id='+data[r]["Id"]
                    };
                }
                if (data[r]["Type"]=="3") {
                    row = {
                        id: 'change_ap_'+r,
                        title: '@SMEsCustomer360Degree.Core.Resources.Resource.AccountPlanningEditProductHolding',
                        start: moment(data[r]["ChangeDate"]).local().format(),
                        end: moment(data[r]["ChangeDate"]).local().format(),
                        allDay: false,
                        url : '/PortfolioManagement/ViewHistoryProductHolding?cif='+data[r]["Cif"] + '&type=3&id='+data[r]["Id"]
                    };
                }
                content.push(row);
            }
            var calendar = $('#calendar').fullCalendar({
                header: {
                    left: 'month,agendaWeek,agendaDay',
                    center: 'title',
                    right: 'prev,next today'
                },
                lang: '@initialLangCode',
                disableDragging: true,
                selectable: true,
                selectHelper: true,
                eventLimit: true,
                select: function (start, end, allDay) {
                    $('#fc_create').click();

                    started = start;
                    ended = end;

                    $(".antosubmit").on("click", function () {
                        var title = $("#title").val();
                        if (end) {
                            ended = end;
                        }

                        categoryClass = $("#event_type").val();

                        if (title) {
                            calendar.fullCalendar('renderEvent', {
                                title: title,
                                start: started,
                                end: end,
                                allDay: allDay
                            },
                              true // make the event "stick"
                            );
                        }

                        $('#title').val('');

                        calendar.fullCalendar('unselect');

                        $('.antoclose').click();

                        return false;
                    });
                },
                eventClick: function (calEvent, jsEvent, view) {
                    $('#fc_edit').click();
                    $('#title2').val(calEvent.title);

                    categoryClass = $("#event_type").val();

                    $(".antosubmit2").on("click", function () {
                        calEvent.title = $("#title2").val();

                        calendar.fullCalendar('updateEvent', calEvent);
                        $('.antoclose2').click();
                    });

                    calendar.fullCalendar('unselect');
                },
                //editable: true,
                events: content
            });
        });
    </script>
    <!-- /FullCalendar -->
    <script type="text/javascript">
        function startPageTourGuide() {
            var intro = introJs();
            var steps = [
                    {
                        element: '#pm-ap-tab',
                        intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccountPlanningTab"
                    },
                    {
                        element: '#pm-pm-tab',
                        intro: "@SMEsCustomer360Degree.Core.Resources.Resource.TourGuidePortManTab",
                        position: 'right'
                    },
                    {
                        element: '#calendar',
                        intro: '@SMEsCustomer360Degree.Core.Resources.Resource.TourGuideAccGenTable',
                        position: 'bottom'
                    }
            ];
            intro.setOptions({
                steps: steps,
                showProgress: true,
                scrollToElement: true,
            });
            intro.setOption('tooltipPosition', 'auto');
            intro.setOption('positionPrecedence', ['left', 'right', 'bottom', 'top'])
            intro.start();
        }
    </script>
}